#set(seoTitle="季报上传统计")
#@layout()
#define js()
<script src="/assets/js/echarts.js"></script>
#end
<style>
  
    .table{
        margin-top:15px;
        padding:5px;
        float:left;
        font-size:12px;
    }

</style>
#define content()
<div id="p1" class="easyui-panel" title="查询" style="padding:10px;background:#fafafa;margin-bottom:10px;" iconCls="icon-sum" closable="false" collapsible="false" minimizable="false" maximizable="false">
        <select id="year_slt" class="easyui-combobox"  style="width:70px;"> 
        <option value=""></option>    
    <option value="2017">2017</option>   
    <option value="2018">2018</option>   
    <option value="2019">2019</option>   
    <option value="2020">2020</option>   
</select>   年
       <select id="quarter_slt" class="easyui-combobox"  style="width:70px;">
     <option value=""></option>     
    <option value="1">1</option>   
    <option value="2">2</option>   
    <option value="3">3</option>   
    <option value="4">4</option>   
</select>  季度
        <a href="javascript:search();" class="easyui-linkbutton" plain="true" iconCls="icon-search">搜索</a>  

</div>
     <div id="main" style="width: 500px;height:400px;float:left"></div>
     <div class="table">
        <table>
           
            <tbody id="tbody">
           
            </tbody>
        </table>
     </div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        myChart.title = '环形图';

option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['已经上传','暂未上传']
    },
    series: [
        {
            name:'季报上传统计',
            type:'pie',
            radius: ['30%', '70%'],
            color:['#d48265','#91c7ae'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '25',
                        fontWeight: 'normal'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            }
           
        }
    ]
};


        // 使用刚指定的配置项和数据显示图表。
        
        
        function search(){
            var year=$('#year_slt').combobox('getValue');
            var quarter=$('#quarter_slt').combobox('getValue');
            $.post("quarterData", { "year":year,"quarter": quarter },
                function(ret){
                     if(ret.code!='00'){
                         $.messager.alert('警告',ret.message); 
                     } else{
                         var banks=ret.data.banks;
                         var str='<tr style="background:#ddd"><td style="padding:5px;">未上传机构</td></tr>';
                        
                        
                         for(var i=0;i<banks.length;i++){
                             str+=' <tr><td>'+banks[i]+'</td></tr>';
                         }
                         $('#tbody').html('');
                         $('#tbody').append(str);
                         option.series[0].data=ret.data.count;
                         myChart.setOption(option);
                         
                         
                     }  
                     
             }, "json");
            
            
        }
     </script>
#end

